<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>业务管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">

//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
        layui.use('element', function(){
            var element = layui.element;
        });

		$(document).ready(function() {
            var by = function(name){
                return function(o, p){
                    var a, b;
                    if (typeof o === "object" && typeof p === "object" && o && p) {
                        a = o[name];
                        b = p[name];
                        if (a === b) {
                            return 0;
                        }
                        if (typeof a === typeof b) {
                            return a > b ? -1 : 1;
                        }
                        return typeof a > typeof b ? -1 : 1;
                    }
                    else {
                        throw ("error");
                    }
                }
            }
                $("#map").click(function () {
                    var myChart = echarts.init(document.getElementById('map'));
                    $.ajax({
                        type : "POST",  //提交方式
                        url : "${ctx}/sys/firm/firm/bingMap",//路径
                        success : function(shu) {//返回数据根据结果进行相应的处理
                            var zt = [];
                            var sums = [];
                            for (var key in shu) {
                                zt.push(key);
                                sums.push(shu[key]);
                            }
                            var option = {
                                toolbox:{
                                  feature:{
                                      saveAsImage:{}
								  }
								},
                                title : {
                                    text: '客户跟单系统统计图',
                                    x:'center'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data: ['已报案'+sums[0],'报案未回访'+sums[1],'已回访待受理'+sums[2],'已受理'+sums[3],'未结案'+sums[4],'已结案'+sums[5],'已撤单'+sums[6]]
                                },
                                series : [
                                    {
                                        name: '数据来源',
                                        type: 'pie',
                                        radius : '55%',
                                        center: ['50%', '60%'],
                                        data:[
                                            {value:sums[0], name:'已报案'+sums[0]},
                                            {value:sums[1], name:'报案未回访'+sums[1]},
                                            {value:sums[2], name:'已回访待受理'+sums[2]},
                                            {value:sums[3], name:'已受理'+sums[3]},
                                            {value:sums[4], name:'未结案'+sums[4]},
                                            {value:sums[5], name:'已结案'+sums[5]},
                                            {value:sums[6], name:'已撤单'+sums[6]}
                                        ],
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            myChart.setOption(option);
                            function eConsole(param) {


                                //alert(option.series[0].data.length);
                                // alert(option.series[0].data[i]);
                                //param.dataIndex 获取当前点击索引，
                                var ss= param.dataIndex;
                                var myChart = echarts.init(document.getElementById('maps'));
                                $.ajax({
                                    type : "POST",  //提交方式
                                    url : "${ctx}/sys/firm/firm/getYwstatic",//路径
                                    data : {id:ss},//数据，这里使用的是Json格式进行传输
                                    success : function(data) {//返回数据根据结果进行相应的处
                                          var ss=data.sort(by("num"));
                                           var s3 = ss[0].num;
                                           ss.splice(0,1)

                                           var s1 = []; var s2 = [];
                                           for(var i in ss){
                                               s1.push(ss[i].name);
                                               s2.push(ss[i].num);
										   }
                                        var option1 = {
                                            toolbox:{
                                                feature:{
                                                    saveAsImage:{}
                                                }
                                            },
                                            title: {
                                                text: '各机构案件统计',
                                                subtext: s3+'案件数'
                                                // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
                                            },
                                            tooltip : {
                                                trigger: 'axis',
                                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                                },
                                                formatter: function (params) {
                                                    var tar = params[1];
                                                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                                                }
                                            },
                                            grid: {
                                                left: '3%',
                                                right: '4%',
                                                bottom: '3%',
                                                containLabel: true
                                            },
                                            xAxis: {
                                                type : 'category',
                                                splitLine: {show:false},
                                                data : s1,
                                                axisLabel:{
                                                    interval:0,
                                                    rotate:-25
                                                }
                                            },
                                            yAxis: {
                                                type : 'value'
                                            },
                                            series: [
                                                {
                                                    name: '辅助',
                                                    type: 'bar',
                                                    stack:  '总量',
                                                    itemStyle: {
                                                        normal: {
                                                            color: function (params){
                                                                var colorList = [
                                                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                                                ];
                                                                return colorList[params.dataIndex]
                                                            },
                                                            //以下为是否显示
                                                            label: {
                                                                show: true
                                                            }
                                                        }
                                                    },
                                                    data: [0, 0, 0, 0, 0, 0,0,0,0,0,0,0]
                                                },
                                                {
                                                    name: s3+'案件数',
                                                    type: 'bar',
                                                    stack: '总量',
                                                    label: {
                                                        normal: {
                                                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                                            color: function(params) {
                                                                var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
                                                                return colorList[params.dataIndex]
                                                            }
                                                            //以下为是否显示，显示位置和显示格式的设置了

                                                        }
                                                    },
                                                    data:s2
                                                }
                                            ]
                                        };

                                        myChart.setOption(option1);


                                    }
                                });
                                // clickFunc(param.dataIndex);//执行点击效果

                            }


                            myChart.on("click", eConsole);
                        }
					})



            })
			$("#map").trigger("click");

        });
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="#">统计列表</a></li>
	</ul>

	<div>
    <div id="map" style="width: 50%;height:600px;float: left;" ></div>
	<div id="maps" style="width: 45%;height:600px;float: left;" ></div>
    </div>

	<div class="pagination">${page}</div>
</body>
</html>